<template>
  <div class="banxin2">
    <div class="left">
      <ul v-for="item,index in artistBar"
          :key="index">
        <section>{{item.title}}</section>
        <li v-for="ite,ind in item.children"
            :key="ind"
            :class="{active:titleBar==ite.name}"
            @click="barClick(ite)">{{ ite.name }}</li>
      </ul>
    </div>
    <div class="right">
      <div class="r-title">
        <h3>{{ titleBar }}</h3>
      </div>
      <div class="content">
        <div class="c-box"
             v-for="item,index in artist"
             :key="item.id">
          <img :src="item.picUrl"
               alt=""
               v-if="index<10">
          <div class="realname">{{ item.name }} <i class="u-icon icon-singer"
               v-if="item.accountId"></i></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { artistHot, artistList } from '@/assets/js/request'
export default {
  data() {
    return {
      artistBar: [
        {
          title: '推荐',
          children: [
            { name: '推荐歌手', type: -1, area: -1 },
            { name: '入驻歌手', type: -1, area: -1 },
          ],
        },
        {
          title: '华语',
          children: [
            { name: '华语男歌手', type: 1, area: 7 },
            { name: '华语女歌手', type: 2, area: 7 },
            { name: '华语组合/乐队', type: 3, area: 7 },
          ],
        },
        {
          title: '日本',
          children: [
            { name: '日本男歌手', type: 1, area: 8 },
            { name: '日本女歌手', type: 2, area: 8 },
            { name: '日本组合/乐队', type: 3, area: 8 },
          ],
        },
        {
          title: '欧美',
          children: [
            { name: '欧美男歌手', type: 1, area: 96 },
            { name: '欧美女歌手', type: 2, area: 96 },
            { name: '欧美组合/乐队', type: 3, area: 96 },
          ],
        },
        {
          title: '韩国',
          children: [
            { name: '韩国男歌手', type: 1, area: 16 },
            { name: '韩国女歌手', type: 2, area: 16 },
            { name: '韩国组合/乐队', type: 3, area: 16 },
          ],
        },
        {
          title: '其他',
          children: [
            { name: '其他男歌手', type: 1, area: 0 },
            { name: '其他女歌手', type: 2, area: 0 },
            { name: '其他组合/乐队', type: 3, area: 0 },
          ],
        },
      ],
      artist: [{ id: null, accountId: null, name: '', picUrl: '' }],
      titleBar: '推荐歌手',
      type: -1,
      area: -1,
    }
  },
  created() {
    artistHot({ limit: 30 }).then((res) => {
      console.log(res)
      let list = []
      res.artists.forEach((item) => {
        let { id, accountId, name, picUrl } = { ...item }
        list.push({ id, accountId, name, picUrl })
      })
      this.artist = list
    })
  },
  methods: {
    barClick(obj) {
      this.type = obj.type
      this.area = obj.area
      this.doArtistList()
      this.titleBar = obj.name
    },
    doArtistList() {
      artistList({ type: this.type, area: this.area }).then((res) => {
        console.log(res)
        let list = []
        res.artists.forEach((item) => {
          let { id, accountId, name, picUrl } = { ...item }
          list.push({ id, accountId, name, picUrl })
        })
        this.artist = list
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '@/assets/css/base.less';
.banxin2 {
  &::after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
  }
  text-align: left;
  .left {
    width: 158px;
    padding: 40px 10px;
    float: left;
    border: 1px solid #ccc;
    ul {
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
      section {
        height: 25px;
        font-size: 16px;
        padding-left: 14px;
        color: #333;
        font-family: 'Microsoft Yahei';
        font-weight: 600;
      }
      li {
        width: 133px;
        padding-left: 27px;
        height: 29px;
        line-height: 29px;
        cursor: pointer;
        background: url(@/assets/image/singer.png) no-repeat 0 9999px;
        background-position: 0 -30px;
        font-size: 12px;
        &:hover {
          text-decoration: underline;
        }
      }
      .active {
        color: #c20c0c;
        background-position: 0 0;
        border: 1px solid #ccc;
      }
    }
  }
  .right {
    float: right;
    padding: 40px;
    width: calc(100% - 260px);
    .r-title {
      border-bottom: 2px solid #c20c0c;
      height: 40px;
      font-size: 24px;
      color: #000;
      line-height: 40px;
      margin-bottom: 20px;
    }
    .content {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      column-gap: 17px;
      row-gap: 25px;
      .c-box {
        img {
          width: 130px;
          height: 130px;
        }
        .realname {
          font-size: 12px;
          color: #000;
          margin-top: 10px;
          .icon-singer {
            float: right;
            width: 17px;
            height: 18px;
            background-position: 0 -740px;
          }
        }
      }
    }
  }
}
</style>